<template>
  <div class="menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" @click="selectItem(index, item)"
        :class="{ 'selected': selectedIndex === index }">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, reactive } from "vue";
const emit = defineEmits(['changeMenu']);
const menuItems = reactive(["健康档案", "健康监测", "健康报告"]); // 菜单项数据
const selectedIndex = ref(0);
const selectItem = (index: number, row: string) => {
  selectedIndex.value = index;
  emit('changeMenu', row)//给父组件传值
}
</script>
<style lang="scss" scoped>
.menu li {
  cursor: pointer;
  background: #fff;
  margin-top: 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.menu .selected {
  color: #FFC200;
  /* 设置选中时的文本颜色 */
}
</style>